/*年度总预算设置 */
<template>
  <div>
    <condition-card @reset="resetSearch" @search="onSearch" label-position="right" label-width="150px">
      <!-- 预算年度 -->
      <el-row :gutter="24" style="height: 50px;">
        <el-col :span="8">
          <el-form-item :label="$t('annualTotalBudgetSetting.budgetYear')">
            <el-date-picker
              :placeholder="$t('annualTotalBudgetSetting.selectionYear')"
              style="width: 70%"
              v-model="queryForm.condition.year"
              type="year"
              value-format="yyyy"
              format="yyyy">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </condition-card>


    <el-card shadow="never" v-loading="loading" body-style="padding: 24px;" class="card-margin">
      <h1 class="condition-title">{{$t('annualTotalBudgetSetting.annualTotalBudgetList')}}</h1>
      <div class="edu-opertion-bar sub-title">
        <div class="float-right" style="display: flex;">
          <el-button type="primary" style="margin-left:10px" @click="increased">{{$t('annualTotalBudgetSetting.newlyAdded')}}</el-button>
        </div>
      </div>

      <edu-table :pagination="false" :selection="false" orderFixed=false :tooltipEffect="tooltipEffect" stripe :data="dataList" size="mini" @selection-change="handleSelectionChange">
        <edu-table-column :label="$t('annualTotalBudgetSetting.budgetYear')" prop="year"></edu-table-column>
        <edu-table-column :label="$t('annualTotalBudgetSetting.generalBudget')" prop="budget"></edu-table-column>
        <edu-table-column :label="$t('annualTotalBudgetSetting.amountUsed')" prop="spentBudget"></edu-table-column>
        <edu-table-column :label="$t('annualTotalBudgetSetting.unusedQuota')" prop="unspentBudget"></edu-table-column>
        <edu-table-column :label="$t('annualTotalBudgetSetting.operation')" fit prop="operate" width="150">
          <template slot-scope="props">
            <el-button type="text" @click="editInternEval(props.row)">{{$t('annualTotalBudgetSetting.edit')}}</el-button>
            <!-- <el-button type="text" @click="examineDetails(props.row)">{{$t('scoringItemSetting.delete')}}</el-button> -->
            <!-- <el-button type="text" @click="selectEvalBackout(props.row)">{{$t('interdisciplinaryManagement.backout')}}</el-button> -->
          </template>
        </edu-table-column>
      </edu-table>





      <el-row type="flex" class="row-bg" justify="end">
        <el-col>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryForm.pageNum_"
            :page-sizes="[20, 40, 80, 100]"
            :page-size="queryForm.pageSize_"
            layout="total, sizes, prev, pager, next, jumper"
            :total="queryForm.total_"
            style="float:right;margin-top:10px"
          ></el-pagination>
        </el-col>
      </el-row>
    </el-card>




      
    <el-dialog :before-close="cancel" :title="dialogTitle" :visible.sync="dialogFormVisible" :dataProp="dataProp" :dataQueryForm="dataQueryForm">
      <el-form :model="form" ref="formName" :rules="rules">
        <!-- 年度 -->
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('annualTotalBudgetSetting.year')" prop="year" :label-width="formLabelWidth">
              <div class="block">
                <el-date-picker style="width:50%" v-model="form.year" type="year" format="yyyy" value-format="yyyy"  
                  :placeholder="$t('annualTotalBudgetSetting.selectionYear')">
                </el-date-picker>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 总预算 -->
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('annualTotalBudgetSetting.generalBudget')" prop="budget" :label-width="formLabelWidth">
              <el-input style="width:50%" :placeholder="$t('annualTotalBudgetSetting.pleaseEnter')" maxlength="12" v-model="form.budget" clearable ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">{{$t('annualTotalBudgetSetting.cancel')}}</el-button>
        <el-button type="primary" @click="determine('formName')">{{$t('annualTotalBudgetSetting.determine')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import competiManagementApi from 'common/src/api/subjectCompetition/competiManagement';
// import { queryDic } from "common/src/api/dictionary";
// import UTILS from "common/src/utils/utils";
// import mainbaseView from 'common/src/views/graduateStudent/component/mainbaseView';
// import addDialog from 'common/src/views/graduateStudent/component/EduTable';
// import mainbaseAdd from 'common/src/views/graduateStudent/component/mainbaseAdd';
// import graduateStudent from 'common/src/api/graduateStudent/graduateStudent';
export default {
  // comments:{
  //   mainbaseView,
  //   mainbaseAdd
  // },
  data () {
    return {
      dialogTitle: this.$t('annualTotalBudgetSetting.newAnnualBudget'),
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        year: '',
        budget: '',
        id: ''
      },
      rules: {
        year:[
          { required: true, message: this.$t('annualTotalBudgetSetting.selectionYear'), trigger: 'blur' }
        ],
        budget: [
          // { required: true, message: '请输入总预算', trigger: 'blur' },
          { required: true, validator: this.checkNumber, trigger: 'blur'}
        ]
      },
      value3:'',
      formLabelWidth: '120px',
      indexKey: '1', // 面包屑
      title: '',
      titleList: '',
      fileList: [],
      category: { category: 1 },
      mainbase: '专家',
      showDate: true,
      addflag: false,
      tableFlag: false,
      peopleadd: {},
      dataQueryForm: {},
      curRow: {},
      ifDetials: false,
      copyDialog: false,
      curCalendarId: '',
      isAllDel: true,
      exportButton: false,
      exportResult: null,
      checkTopicListForm: {
        dataList: []
      },
      multipleSelection: [],
      provideData: {}, // 提供子组件表格数据
      queryForm: {
        pageNum_: 1,
        pageSize_: 20,
        total_: 0,
        condition:{
          year: ''
        }
      },
      dataListProp: {},
      dataProp: '',
      copyTime: {
        time: ''
      },
      options: {
        facultys: [],
        timeList: [],
        title: [],
        sex: []
      },
      queryList: {
        calendarId: '',
        faculty: '',
        status: '',
        course: ''
      },
      id: '',
      formsLearn: [],
      dataList: [],
      breadPath: {
        label: this.$t('graduate.graduate'),
        key: "1",
        children: [
          {
            key: "2",
            label: ""
          }
        ]
      },
      
    };
  },
  mounted() {
    this.getCompetiManagement(this.queryForm)
  },
  methods: {
    // 校验
      checkNumber(rule, value, callback) {
        if (value>0) {
          let expReg =/^\d{1,9}$|^\d{1,9}[.]\d{1,2}$/;
          // let expReg =/^([0-9]{1,9})+(.[0-9]{1,2})?$/;
          // let expReg =/^([1-9][0-9]*)(.[0-9]{1,2})?$/;
          if (expReg.test(value)) {
            callback();
          } else {
            callback(new Error(this.$t('annualTotalBudgetSetting.pleaseEnterTheAmount')));
          }
        } else {
          callback(new Error(this.$t('annualTotalBudgetSetting.pleaseEnterTheAmount')));
        }
    },
    // 重置
    resetSearch() {
      for (let key in this.queryForm.condition) {
        this.queryForm.condition[key] = '';
      }
      this.queryForm.pageNum_ = 1
      this.getCompetiManagement(this.queryForm)
    },
    // 筛选
    onSearch() {
      this.queryForm.pageNum_ = 1
      this.getCompetiManagement(this.queryForm)
    },
    // 新增
    increased() {
      this.dialogFormVisible = true;
      this.dialogTitle = this.$t('annualTotalBudgetSetting.newAnnualBudget');
      this.dataProp = '新增'
    },
    // 编辑
    editInternEval(data) {
      // console.log(data, 'dsf');
      this.dialogFormVisible = true;
      this.dialogTitle = this.$t('annualTotalBudgetSetting.editAnnualBudget');
      this.form = Object.assign({}, data)
      this.form.year = data.year + ''
      // this.form.budget = data.budget
      // this.form.id = data.id
    },
    // 取消
    // beforeClose(param) {
    // this.$refs.formName.cancelDialog()
    // },

    examineDetails() {

    },
    handleSelectionChange() {

    },
    // 处理分页大小
    handleSizeChange(val) {
      this.queryForm.pageSize_ = val
      this.queryForm.pageNum_ = 1
      this.getCompetiManagement(this.queryForm);
    },
    // 处理分页改变
    handleCurrentChange(val) {
      this.queryForm.pageNum_ = val
      this.getCompetiManagement(this.queryForm);
    },
    // 取消
    cancel() {
      this.form = { }
      this.$refs['formName'].resetFields();
      this.dialogFormVisible = false;
    },
    // 确定
    determine(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.dialogTitle === this.$t('annualTotalBudgetSetting.newAnnualBudget')) {
             competiManagementApi.setUpAnnualBudget(this.form).then(res =>{
              this.$message({type: "success", message: this.$t('internship.successfully')});
              this.dialogFormVisible = false;
              this.$refs['formName'].resetFields();
              this.queryForm.pageNum_ = 1
              this.getCompetiManagement(this.queryForm)
            })
          } else {
            if (this.form.budget < this.form.spentBudget) {
              return this.$message(this.$t('annualTotalBudgetSetting.alreadyUsed'));
            }
              competiManagementApi.updateAnnualBudget(this.form).then(res =>{
                this.$message({type: "success", message: this.$t('internship.successfully')});
                this.dialogFormVisible = false;
                this.$refs['formName'].resetFields();
                this.queryForm.pageNum_ = 1
                this.getCompetiManagement(this.queryForm)
            })
          }
       }
      })
    },
    
    getCompetiManagement(data) {
      competiManagementApi.queryAnnualBudget(data).then(res => {
        // console.log(res, 'dsfg');
        this.dataList = res.data.list
        this.queryForm.total_ = res.data.total_
      })
    }
  }

}

</script>



